<template>
	<view class="switch-bar-item">
		<view class="switch-item-name">
			<view class="main-name">{{name}}</view>	
			<view class="sub-name" v-if="subName">{{subName}}</view>	
		</view>
		<view class="switch" :class="{ active: switchVal }" @tap="toggleSwitch">
			<view class="switch-dot"></view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "switchBarItem",
		props:{
			name:{
				type: String,
				default: ''
			},
			initVal:{
				type: Boolean,
				default: false
			},
			subName:{
				type: String,
				default: ''
			}
		},
		data() {
			return {
                switchVal: false
			}
		},
		mounted(){
            this.switchVal = this.initVal
		},
		methods: {
			toggleSwitch() {
				this.switchVal = !this.switchVal
				this.$emit('switch',this.switchVal)
			}
		}
	}
</script>

<style lang="less">
		.switch-bar-item {
			height: 106rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 2rpx solid #eee;
	
			.switch-item-name {
				.main-name{
                    font-size: 30rpx;
				    font-weight: 400;
				    color: #323746;
				    line-height: 42rpx;
				}
				.sub-name{
				    font-size: 24rpx;
				    font-weight: 400;
				    color: #666;
				    line-height: 30rpx;
					margin-top: 6rpx;
				}
			}
	
			.switch {
				width: 80rpx;
				height: 46rpx;
				border-radius: 23rpx;
				background-color: #DEDEDE;
				position: relative;
	
				&.active {
					background-color: #3399FF;
	
					.switch-dot {
						left: 38rpx;
					}
				}
	
				.switch-dot {
					width: 40rpx;
					height: 40rpx;
					position: absolute;
					background-color: #FFFFFF;
					border-radius: 50%;
					top: 3rpx;
					left: 4rpx;
				}
			}
		}
</style>
